<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- to force a reload -->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <title>Idle Loops</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    
    <script src='lib/jquery.min.js'></script>
    <script src='lib/lz-string.min.js'></script>
    <script src='lib/chart.min.js'></script>
    <script src='lib/mousetrap.min.js'></script>

</head>
<body id="theBody" style="min-width:1210px">
    <canvas id="talentTreeCanvas" style="display: none;"></canvas>
    <div id="talentTree" style="display: none;"></div>
    <div id="timeInfo" style="width:100%;text-align:center;">
        <button id="cheat" class="button showthat control" style="display: none; margin-top: 5px;" onclick="cheat()">Cheat</button>
        <div id="timeBarContainer" style="width:100%;height:10px;background:white;text-align:center;position:relative;">
            <div id="timeBar" style="height:100%;width:20%;background-color:#8293ff;display:block;margin:auto;"></div>
        </div>
        <div id='menu' style='float: left; height: 30px; margin-left: 24px; margin-right: -24px;'></div>
        <div id='trackedResources'></div>
        <br>
        <div id='timeControls'></div>
    </div>

    <div id="statsColumn" style="width:410px;vertical-align:top;">
        <div id="statsWindow" style="width:90%;margin-left:12px;text-align:center;position:relative;">
            <div class="showthat">
                <div class="large bold localized" data-lockey="stats>title"></div>
                <div class="showthis localized" data-lockey="stats>tooltip>explanation" style="width:550px;"></div>
            </div><br>
            <input type="radio" id="regularStats" name="statView" onclick="view.changeStatView()" checked />
            <label for="regularStats" class="localized" data-lockey="stats>view>regular"></label>
            <input type="radio" id="radarStats" name="statView" onclick="view.changeStatView()" />
            <label for="radarStats" class="localized" data-lockey="stats>view>radar"></label>
            <div class="showthat" id="radarChart">
                <canvas id="statChartCtx" width="350" height="350"></canvas>
                <div class="showthis localized" style="margin-top:20px;width:375px" data-lockey="stats>tooltip>graph_legend"></div>
            </div>
            <div id="statContainer" style="width:100%;position:absolute;top:18px;left:0;"></div><br>
            <div id="skillList" style="width:100%;margin-top:25px;display:none">
                <div class="showthat">
                    <div class="large bold localized" data-lockey="skills>title"></div>
                    <div class="showthis localized" data-lockey="skills>tooltip>no_reset_on_restart"></div>
                </div><br>
                <div class="skillContainer showthat" id="skillSCombatContainer">
                    <div class="skillLabel medium bold localized" data-lockey="skills>scombat>label"></div>
                    <div class="statNum medium"><div id="skillSCombatLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="showthis">
                        <span class="localized" data-lockey="skills>scombat>desc"></span><br>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillTCombatContainer">
                    <div class="skillLabel medium bold localized" data-lockey="skills>tcombat>label"></div>
                    <div class="statNum medium"><div id="skillTCombatLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="showthis">
                        <span class="localized" data-lockey="skills>tcombat>desc"></span><br>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillCombatContainer" onmouseover="view.showSkill('Combat')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>combat>label"></div>
                    <div class="statNum medium"><div id="skillCombatLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillCombatLevelBar"></div></div>
                    <div class="showthis">
                        <span class="localized" data-lockey="skills>combat>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillCombatLevelExp"></div>/<div id="skillCombatLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillCombatLevelProgress"></div>%)</div><br>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillMagicContainer" onmouseover="view.showSkill('Magic')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>magic>label"></div>
                    <div class="statNum medium"><div id="skillMagicLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillMagicLevelBar"></div></div>
                    <div class="showthis">
                        <span class="localized" data-lockey="skills>magic>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillMagicLevelExp"></div>/<div id="skillMagicLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillMagicLevelProgress"></div>%)</div><br>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillPracticalContainer" onmouseover="view.showSkill('Practical')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>practical>label"></div>
                    <div class="statNum medium"><div id="skillPracticalLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillPracticalLevelBar"></div></div>
                    <div class="showthis" style="width:490px">
                        <span class="localized" data-lockey="skills>practical>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillPracticalLevelExp"></div>/<div id="skillPracticalLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillPracticalLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>practical>desc2"></span>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillAlchemyContainer" onmouseover="view.showSkill('Alchemy')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>alchemy>label">Alchemy</div>
                    <div class="statNum medium"><div id="skillAlchemyLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillAlchemyLevelBar"></div></div>
                    <div class="showthis">
                        <span class="localized" data-lockey="skills>alchemy>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillAlchemyLevelExp"></div>/<div id="skillAlchemyLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillAlchemyLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>alchemy>desc2"></span><br>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillDarkContainer" onmouseover="view.showSkill('Dark')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>dark>label"></div>
                    <div class="statNum medium"><div id="skillDarkLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillDarkLevelBar"></div></div>
                    <div class="showthis" style="width:490px">
                        <span class="localized" data-lockey="skills>dark>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillDarkLevelExp"></div>/<div id="skillDarkLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillDarkLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>dark>desc2"></span>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillCraftingContainer" onmouseover="view.showSkill('Crafting')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>crafting>label"></div>
                    <div class="statNum medium"><div id="skillCraftingLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillCraftingLevelBar"></div></div>
                    <div class="showthis">
                        <span class="localized" data-lockey="skills>crafting>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillCraftingLevelExp"></div>/<div id="skillCraftingLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillCraftingLevelProgress"></div>%)</div><br>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillChronomancyContainer" onmouseover="view.showSkill('Chronomancy')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>chronomancy>label"></div>
                    <div class="statNum medium"><div id="skillChronomancyLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillChronomancyLevelBar"></div></div>
                    <div class="showthis" style="width:490px">
                        <span class="localized" data-lockey="skills>chronomancy>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillChronomancyLevelExp"></div>/<div id="skillChronomancyLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillChronomancyLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>chronomancy>desc2"></span>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillPyromancyContainer" onmouseover="view.showSkill('Pyromancy')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>pyromancy>label"></div>
                    <div class="statNum medium"><div id="skillPyromancyLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillPyromancyLevelBar"></div></div>
                    <div class="showthis" style="width:490px">
                        <span class="localized" data-lockey="skills>pyromancy>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillPyromancyLevelExp"></div>/<div id="skillPyromancyLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillPyromancyLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>pyromancy>desc2"></span>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillRestorationContainer" onmouseover="view.showSkill('Restoration')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>restoration>label"></div>
                    <div class="statNum medium"><div id="skillRestorationLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillRestorationLevelBar"></div></div>
                    <div class="showthis" style="width:490px">
                        <span class="localized" data-lockey="skills>restoration>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillRestorationLevelExp"></div>/<div id="skillRestorationLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillRestorationLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>restoration>desc2"></span>
                    </div>
                </div>
                <div class="skillContainer showthat" id="skillSpatiomancyContainer" onmouseover="view.showSkill('Spatiomancy')" onmouseout="view.showSkill(undefined)">
                    <div class="skillLabel medium bold localized" data-lockey="skills>spatiomancy>label"></div>
                    <div class="statNum medium"><div id="skillSpatiomancyLevel">0</div></div>
                    <div style="margin-top:18px;"></div>
                    <div class="thinProgressBarUpper"><div class="statBar skillExpBar townExpBar" id="skillSpatiomancyLevelBar"></div></div>
                    <div class="showthis" style="width:490px">
                        <span class="localized" data-lockey="skills>spatiomancy>desc"></span><br>
                        <div class="medium bold localized" data-lockey="skills>tooltip>level_exp"></div> <div id="skillSpatiomancyLevelExp"></div>/<div id="skillSpatiomancyLevelExpNeeded"></div> <div class="statTooltipPerc">(<div id="skillSpatiomancyLevelProgress"></div>%)</div><br>
                        <span class="localized" data-lockey="skills>spatiomancy>desc2"></span>
                    </div>
                </div>
            </div>
            <div id="buffList" style="width:100%;margin-top:25px;flex-direction: column;display:none;">
                <div class="showthat">
                    <div class="large bold localized" data-lockey="buffs>title"></div>
                    <div class="showthis localized" data-lockey="buffs>tooltip>no_reset_on_restart"></div>
                </div>
                <br>
                <div id="buffsContainer" style="display: flex;flex-direction: column;"></div>
            </div>
        </div>
    </div>

    <div id="actionsColumn" style="width:350px;vertical-align:top;">
        <div id="actionList" style="width:100%;text-align:center;">
            <div class="showthat">
                <div class="large bold localized" style="margin-right: -49px;" data-lockey="actions>title_list"></div>
                <div class="showthis">
                    <i class='actionIcon far fa-circle'></i> <span class='localized' data-lockey="actions>tooltip>icons>circle"></span><br>
                    <i class='actionIcon fas fa-plus'></i> <span class='localized' data-lockey="actions>tooltip>icons>plus"></span><br>
                    <i class='actionIcon fas fa-minus'></i> <span class='localized' data-lockey="actions>tooltip>icons>minus"></span><br>
                    <i class='actionIcon fas fa-arrows-alt-h'></i> <span class='localized' data-lockey="actions>tooltip>icons>arrows_h"></span><br>
                    <i class='actionIcon fas fa-sort-up'></i> <span class='localized' data-lockey="actions>tooltip>icons>sort_up"></span><br>
                    <i class='actionIcon fas fa-sort-down'></i> <span class='localized' data-lockey="actions>tooltip>icons>sort_down"></span><br>
                    <i class='actionIcon far fa-check-circle'></i><span style="margin-left: -2px;"> /</span><i class='actionIcon far fa-times-circle'></i> <span class='localized' data-lockey="actions>tooltip>icons>circles"></span><br>
                    <i class='actionIcon fas fa-times'></i> <span class='localized' data-lockey="actions>tooltip>icons>times"></span><br>
                    <span class='localized' data-lockey="actions>tooltip>list_explanation"></span>
                </div>
            </div>
            <div style="position: relative; left: 135px;">
                <div class="button" style="z-index: 0;" onclick="adjustActionListSize(100)">+</div>
                <div class="button" style="z-index: 0;" onclick="adjustActionListSize(-100)">-</div>
            </div>
            <br>
            <div id="expandableList">
                <div id="curActionsListContainer">
                    <div id="curActionsList"></div>
                    <div class="showthat" style="position:absolute;bottom:0;left:0;width:100%;">
                        <div class="bold localized" data-lockey="actions>tooltip>mana_used"></div>
                        <div id="totalTicks" style="font-size: 0.75rem;"></div>
                        <div class="showthis localized" data-lockey="actions>tooltip>mana_used_explanation"></div>
                    </div>
                </div>
                <div id="nextActionsListContainer">
                    <div id="nextActionsList"></div>
                    <div id="actionTooltipContainer" style="margin-top:10px;width:100%;text-align:left;max-height:357px;overflow:auto;"></div>
                    <div style="position:absolute;bottom:0;left:0;width:100%;">
                        <div class="bold localized" data-lockey="actions>tooltip>amount"></div>
                        <div class="button" id="amount1" onclick="changeActionAmount(1, 1)">1</div>
                        <div class="button" id="amount2" onclick="changeActionAmount(5, 2)">5</div>
                        <div class="button" id="amount3" onclick="changeActionAmount(10, 3)">10</div>
                        <input id="amountCustom" oninput="setCustomActionAmount()" value="1" style="width: 75px; position: relative; left: 0; top: -2px; border: 1px solid black; height: 16px;">
                    </div>
                </div>
            </div>
            <div id="actionChanges" style="display:flex;text-align:left;width:100%;margin-top:5px;">
                <div style="width:50%;">
                    <input type="checkbox" id="keepCurrentListInput" class="checkbox" onchange="setOption('keepCurrentList', this.checked)">
                    <label for="keepCurrentListInput" class="localized" data-lockey="actions>tooltip>current_list_active"></label><br>
                    <input type="checkbox" id="repeatLastActionInput" class="checkbox" onchange="setOption('repeatLastAction', this.checked)">
                    <label for="repeatLastActionInput" class="localized" data-lockey="actions>tooltip>repeat_last_action"></label><br>
                    <input type="checkbox" id="addActionsToTopInput" class="checkbox" onchange="setOption('addActionsToTop', this.checked)">
                    <label for="addActionsToTopInput" class="localized" data-lockey="actions>tooltip>add_action_top"></label>
                </div>
                <div style="margin-left:-4px;text-align:right;width:50%;">
                    <div class="bold localized" style="margin-top:3px;" data-lockey="actions>title_loadout"></div>
                    <div class="button unused showthat" id="load1" onclick="selectLoadout(1)">1
                        <div id="load1name" class='showthisname'></div>
                    </div>
                    <div class="button unused showthat" id="load2" onclick="selectLoadout(2)">2
                        <div id="load2name" class='showthisname'></div>
                    </div>
                    <div class="button unused showthat" id="load3" onclick="selectLoadout(3)">3
                        <div id="load3name" class='showthisname'></div>
                    </div>
                    <div class="button unused showthat" id="load4" onclick="selectLoadout(4)">4
                        <div id="load4name" class='showthisname'></div>
                    </div>
                    <div class="button unused showthat" id="load5" style="margin-right: -4px;" onclick="selectLoadout(5)">5
                        <div id="load5name" class='showthisname'></div>
                    </div>
                    <br>
                    <div class="button localized" style="margin-bottom:5px;margin-top:3px;margin-right:-4px;" onclick="saveList()" data-lockey="actions>tooltip>save_loadout"></div><br>
                    <div class="button localized" style="margin-bottom:5px;margin-right:-4px;" onclick="loadList()" data-lockey="actions>tooltip>load_loadout"></div><br>
                    <div class="button localized" style="margin-right:-4px;" onclick="clearList()" data-lockey="actions>tooltip>clear_list"></div>
                </div>
            </div>
        </div>

        <div id="spells" style="width:100%;text-align:center;margin-top:10px;display:none">
            <div class="showthat">
                <div class="large bold localized" data-lockey="spells>title"></div>
                <div class="showthis">
                </div>
            </div><br>
            <div style="width:100%;padding-top:5px;">
            </div>
        </div>

    </div>

    <div id="townColumn" style="width:535px;vertical-align:top;">
        <div id="townWindow" style="width:100%;text-align:center;">
            <div style="float:left;margin-left:150px;" class="actionIcon fa fa-arrow-left" id="townViewLeft" onclick="view.showTown(townsUnlocked[townsUnlocked.indexOf(townShowing)-1])"></div>
            <div class="showthat">
                <div class="large bold"><div class="bold" id="townName"></div></div>
                <div id='townDesc' class='showthis'></div>
            </div>
            <div style="float:right;margin-right:150px;" class="actionIcon fa fa-arrow-right" id="townViewRight" onclick="view.showTown(townsUnlocked[townsUnlocked.indexOf(townShowing)+1])"></div>
        </div><br>
        <div id="townInfo0" class='townInfo'></div>
        <div id="townInfo1" class='townInfo' style="display:none;"></div>
        <div id="townInfo2" class='townInfo' style="display:none;"></div>
        <div id="townInfo3" class='townInfo' style="display:none;"></div>
        <div id="townInfo4" class='townInfo' style="display:none;"></div>
        <div id="townInfo5" class='townInfo' style="display:none;"></div>

        <div class="showthat" style="display:block;margin:10px auto 2px auto;text-align:center;">
            <div style="float:left;margin-left:150px;" class="actionIcon fa fa-arrow-left" id="actionsViewLeft" onclick="view.showActions(false)"></div>
            <span class='large bold' id="actionsTitle"></span>
            <div class='showthis localized' data-lockey="actions>tooltip>desc"></div>
            <div style="float:right;margin-right:150px;" class="actionIcon fa fa-arrow-right" id="actionsViewRight" onclick="view.showActions(true)"></div>
        </div>
        <div id="actionOptionsTown0" class='actionOptions'></div>
        <div id="actionOptionsTown1" class='actionOptions' style="display:none;"></div>
        <div id="actionOptionsTown2" class='actionOptions' style="display:none;"></div>
        <div id="actionOptionsTown3" class='actionOptions' style="display:none;"></div>
        <div id="actionOptionsTown4" class='actionOptions' style="display:none;"></div>
        <div id="actionOptionsTown5" class='actionOptions' style="display:none;"></div>
        <div id="actionStoriesTown0" class='actionStories' style="display:none;"></div>
        <div id="actionStoriesTown1" class='actionStories' style="display:none;"></div>
        <div id="actionStoriesTown2" class='actionStories' style="display:none;"></div>
        <div id="actionStoriesTown3" class='actionStories' style="display:none;"></div>
        <div id="actionStoriesTown4" class='actionStories' style="display:none;"></div>
        <div id="actionStoriesTown5" class='actionStories' style="display:none;"></div>
    </div>

    <div id="tutorial" style="position:absolute;width:100%;height:100%;left:0;top:0;z-index:9999;">
        <div style="width:100%;height:100%;background-color:grey;position:relative;opacity:.5"></div>
        <div style="padding:20px;background-color:#e4ece5;border:1px solid black;position:absolute;text-align:left;left:150px;top:150px;">
            <span class="localized" data-lockey="tutorial"></span>
            <div class="button" onclick="closeTutorial()">OK</div>
        </div>
    </div>

    <script src="helpers.js"></script>
    <script src="actionList.js"></script>
    <script src="localization.js"></script>
    <script src="interval.js"></script>
    <script src="driver.js"></script>
    <script src="stats.js"></script>
    <script src="statsgraph.js"></script>
    <script src="actions.js"></script>
    <script src="views/main.view.js"></script>
    <script src="town.js"></script>
    <script src="talents.js"></script>
    <script src="saving.js"></script>
    <script src="hotkeys.js"></script>
    <script src="views/views.js"></script>
    <script src="views/menu.view.js"></script>
    <script src="views/trackedresources.view.js"></script>
    <script src="views/timecontrols.view.js"></script>
    <script src="views/buffs.view.js"></script>
    <script src="views/talenttree.view.js"></script>
    <script>
        let totalActionList = [];
        let dungeons = [[], [], []];
        let initInterval = setInterval(() => {
            if (locCheck) {
                clearInterval(initInterval);
                initInterval = undefined;
                locCheck = undefined;
                for (const prop in Action) {
                    const action = Action[prop];
                    totalActionList.push(action);
                }
                Views.draw();
                Localization.localizePage("game");
                startGame();
            }
        }, 10);
    </script>
</body>
</html>
